<template>
    <div class="biEditor">
        <div class="loading" v-if="loading"><i class="fa fa-spinner fa-pulse"></i></div>
        <textarea id="tinymceTextarea" v-model="value"></textarea>
    </div>
</template>


<script>
import {loadScript} from '../../js/global.js';
import fieldMixin from '../../bi-plug/fieldMixin.js';
export default {
    name:'bi-editor',
    mixins:[fieldMixin],
    data(){
        return {
            loading:true,
            baseUrl:'',
        }
    },
    methods:{
        init(){
            loadScript(this.baseUrl,()=>{

                tinymce.init({
                    selector: '#tinymceTextarea',
                    convert_urls:false,
                    height: 300,
                    menubar:false,
                    plugins:'code lists admin-image admin-upload',
                    totoolbar_mode:'Floating',
                    toolbar:['undo redo | blocks forecolor backcolor bold italic | fontsizeselect formatselect  fontselect lineheight |  bullist numlist | underline strikethrough | alignleft aligncenter alignright | code | admin-image' ],
                    init_instance_callback:(editor)=>{

                        this.loading = false;
                        editor.on("change", (e) => {
                        this.value =  e.level.content;
                        });

                        editor.on("input", (e) => {
                            this.value =  e.target.innerHTML;
                        });
                    }
                });

            });
        }
    },
    mounted(){
        
        this.$ajax({
            url:this.$url({app:'admin', controller:'index', action:'editorInit'}),
            success:(res)=>{
                this.baseUrl = res.editorUrl;
                this.init();
            }
        });
        
    }
}
</script>

<style>
.biEditor{
    min-height: 300px;
    position: relative;
}

.biEditor .tox.tox-tinymce{
    border: none;
    border-radius: 0;
    border: 1px solid #ced4da;
    background-color: #FFFFFF;
    border-radius: 0.25rem;
}

.biEditor .loading{
    min-height: 300px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 150%;
    color:rgba(0, 0, 0, 0.3);
    font-family: Arial, Helvetica, sans-serif;
      border: 1px solid #ced4da;
    background-color: #FFFFFF;
    border-radius: 0.25rem;
    border-radius: 0.25rem;
    position: absolute;
    left: 0;
    top: 0;
}
</style>